import { defineStore } from "pinia";
import ColorUnit from "@/unit/ColorUnit";

export const useColorStore = defineStore("color", () => {
  let _theme = [
    { label: '默认主题0', color: [["primary", "#ffee08"], ["success", "#67C23A"], ["warning", "#E6A23C"], ["danger", "#F56C6C"], ["error", "#F56C6C"], ["info", "#909399"]] },
    { label: '自定义主题1', color: [["primary", "#1984f3"], ["success", "#55DE12"], ["warning", "#EA9412"], ["danger", "#E12020"], ["error", "#E12020"], ["info", "#209399"]] },
    { label: '自定义主题2', color: [["primary", "#0A4680"], ["success", "#276409"], ["warning", "#815410"], ["danger", "#931d1d"], ["error", "#931D1D"], ["info", "#454A55"]] },
  ];
  function setThemeColor(colorMap: [string, string][]) {
    let _namespace = "el";
    colorMap.forEach((colorItem) => {
      setPropertyColor(`--${_namespace}-color-${colorItem[0]}`, colorItem[1]);
      themeColorGradient(
        `--${_namespace}-color-${colorItem[0]}-light-#level#`,
        "lighten",
        colorItem[1]
      );
      // 这个是暗色模式的颜色调整
      setPropertyColor(
        `--${_namespace}-color-${colorItem[0]}-dark-2`,
        colorItem[1],
        "darken"
      );
      // themeColorGradient(`--${_namespace}-color-${colorItem[0]}-dark-#level#`,"darken",colorItem[1]);
    });
  }

  /**
   * 将css3变量设置到document中方便全局调用
   */
  function setPropertyColor(
    varName: string,
    color: string,
    funName?: string,
    level?: number
  ) {
    level = level ? level : 0;
    funName = funName ? funName : "lighten";
    document.documentElement.style.setProperty(
      varName,
      ColorUnit[funName](color, level / 10)
    );
  }

  /**
   * 生成主色的其余渐变色并修改对应CSS3变量值
   */
  function themeColorGradient(
    varName: string,
    funName: string,
    themeColor?: string,
    themeLevel?: number[]
  ) {
    themeColor = themeColor ? themeColor : "#409eff";
    themeLevel = themeLevel ? themeLevel : [3, 5, 7, 8, 9];

    themeLevel.forEach(function (level) {
      setPropertyColor(
        varName.replace("#level#", level.toString()),
        themeColor,
        funName,
        level
      );
    });
  }

  return {
    setThemeColor,
    _theme
  };
});
